<template>
	<NavHeader />

	<div class="top-wrap">
		<div class="flex-ac top-content">
			<div>
				<h1>IPS</h1>
				<h1>智能物流运输系统</h1>
				<p class="desc">场内物流：利用人工智能算法，对场内物料的周转、出入库、存储等调度进行智能管理。场外物流：利用人工智能算法，对物流供应链进行智能优化和管理。</p>
			</div>
			<img src="@/assets/img/ips/top-icon.png" class="top-icon">
		</div>
	</div>
	<div class="box-wrap">
		<img src="@/assets/img/ips/data-show.png" alt="" class="data-show">

		<FadeInSection animation="fade-up">
			<div>
				<h2>你可能会遇到的问题</h2>
				<div class="flex-jsc question-list">
					<div>
						<img src="@/assets/img/ips/question1.png" alt="" srcset="">
						<div class="title">仓储压力大</div>
						<div class="desc">入场物流配送模式缺乏统一的调配，经常会出现卸货道口的拥堵、厂内库存居高不下等情况。</div>
					</div>
					<div>
						<img src="@/assets/img/ips/question2.png" alt="" srcset="">
						<div class="title">管理效率低</div>
						<div class="desc">入场物流由供应商进行单点直送，由于缺乏管控，更容易发生零部件运输不及时，引发反复配送、紧急调度等问题。</div>
					</div>
					<div>
						<img src="@/assets/img/ips/question3.png" alt="" srcset="">
						<div class="title">物流成本高</div>
						<div class="desc">由于缺乏管控，更容易发生零部件运输不及时，引发反复配送、紧急调度等问题。</div>
					</div>
				</div>
				<h2>在精智，这些问题都能够解决</h2>
				<div class="desc">
					通过独有的高效优化算法，为企业提供多维度、多目标、多场景的配送任务分配以及路线规划建议在考虑多种业务约束同时，全局统筹资源，减少运输成本，提升业务响应速度可应用于同城运输/支线运输/干线运输/人员拜访等多种调度场景
				</div>
			</div>
		</FadeInSection>
		<h2>物流类型</h2>
		<FadeInSection animation="fade-up">
			<div class="type1 flex">
				<div>
					<div class="subtitle">类型一</div>
					<h2 style="margin-top: 0;">场内物流</h2>
					<div class="desc">
						利用人工智能算法，对场内物料的周转、出入库、存储等调度进行智能管理。目标是通过降低调度成本、减少额外操作，达到提升场内供应链运作效率。通过机器学习和大数据分析，实现场内物料运输路径规划、节奏节拍调度。提供易于使用的调度指令，并与智能终端等硬件设备进行交互通信，同时集成到供应链管理现有系统中。
					</div>
				</div>
				<img src="@/assets/img/ips/type1.png" alt="">
			</div>
		</FadeInSection>

		<FadeInSection animation="fade-up">
			<div class="type2 flex">
				<img src="@/assets/img/ips/type2.png" alt="">
				<div>
					<div class="subtitle">类型二</div>
					<h2 style="margin-top: 0;">场外物流</h2>
					<div class="desc">
						利用人工智能算法，对物流供应链进行智能优化和管理。目标是通过降低物流成本、减少操作误差，达到提升供应链运作效率。通过机器学习和大数据分析，实现智能化的物流路径规划、运输调度。提供易于使用的接口，方便物流公司和供应链管理者集成到现有系统中。
					</div>
				</div>
			</div>
		</FadeInSection>

		<FadeInSection animation="fade-up">
			<img src="@/assets/img/ips/type.png" alt="" class="type-img">
		</FadeInSection>
	</div>
	<!-- 底部 -->
	<PageFoot />

</template>

<script setup>
import NavHeader from '@/components/NavHeader.vue';
import PageFoot from '@/components/PageFoot.vue';
import FadeInSection from '@/components/FadeInSection.vue';
import { ref } from 'vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const images = [
	new URL('@/assets/img/banner1.png', import.meta.url).href,
	new URL('@/assets/img/banner1.png', import.meta.url).href,
	new URL('@/assets/img/banner1.png', import.meta.url).href,

];

</script>

<style scoped lang="less">
.top-wrap {
	background: url("@/assets/img/aps/top-bg.png");
	width: 100%;
	height: 457px;
	background-position: 100% 100%;
	position: relative;

	.top-content {
		width: 57%;
		position: absolute;
		left: 50%;
		top: 15%;
		transform: translateX(-50%);

		h1 {
			font-size: 37px;
			font-weight: bold;
		}

		.desc {
			font-size: 24px;
			margin-top: 22px;
		}

		.top-icon {
			width: 626px;
			height: 387px;
			margin-left: 120px;
		}
	}

}

.box-wrap {
	text-align: center;
	font-weight: 400;
	width: 62%;
	margin: 0 auto;

	.data-show {
		width: 930px;
		height: 158px;
		border-radius: 34px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 248, 255, 1);
		box-shadow: 0px 7px 7px rgba(190, 199, 207, 0.35);
		margin-top: 40px;
	}

	.question-list {
		margin-top: 50px;

		&>div {
			width: 187px;

			& img {
				width: 70px;
				height: 70px;
			}

			.title {
				font-size: 16px;
				font-weight: bold;
				line-height: 30px;
				margin-top: 15px;
			}

			.desc {
				font-size: 11px;
			}
		}

	}

	.type1,
	.type2 {

		.subtitle {
			color: rgba(102, 102, 102, 1);
			font-size: 18px;
		}

		.desc {
			font-size: 16px;
			color: rgba(126, 134, 141, 1);
			line-height: 26px;
		}
	}

	.type1 {
		text-align: left;
		margin-top: 40px;
		gap: 30px;

		img {

			width: 389px;
			height: 273px;
		}
	}

	.type2 {
		text-align: right;
		margin-top: 95px;
		gap: 120px;

		img {
			width: 504px;
			height: 301px;
		}

	}

	.type-img {
		width: 800px;
		height: 464px;
		margin-top: 67px;
	}

	& h2 {
		font-size: 34px;
		color: #000;
		font-weight: bold;
		margin-top: 60px;
		line-height: 62px;
	}

	& p {
		font-size: 15px;
		color: rgba(88, 95, 109, 1);
		margin-top: 11px;
	}
}
</style>